<template>
	<view class="content">
		<view class="back" @click="goback">
			<image src="../../static/9.png"></image>
			<view>返回</view>
		</view>
		
		<view class="topCon">
			<view class="title">欢迎注册</view>
			<view class="con">
			
				<view class="li">
					<view class="lable">市场地区</view>
					<picker class="picker-box" mode="selector" :range="diquList" range-key="mingcheng" @change="diquPickerChange" :value="value">
					     <view class="picker">
						   <view>{{ diqu == '' ? '下拉选择' : diqu}}</view>
					      <image class="icon" src="../../static/2.png"></image>
					     </view>
					   </picker>
				</view>
				<view class="li">
					<view class="lable">公司名</view>
					<input type="text" v-model="gongsiming" placeholder="请输入公司名"/>
				</view>
				<view class="li">
					<view class="lable">身份</view>
					<picker class="picker-box" mode="selector" :range="shenfenList" range-key="mingcheng" @change="shenfenPickerChange" :value="diquValue">
					     <view class="picker">
						 <view>{{ shenfen == '' ? '下拉选择' :  shenfen}}</view>
					      <image class="icon" src="../../static/2.png"></image>
					     </view>
					   </picker>
				</view>
				<view class="li">
					<view class="lable">姓名</view>
					<input type="text" v-model="xingming" placeholder="请输入姓名"/>
				</view>
				<view class="li">
					<view class="lable">手机号</view>
					<input type="number" v-model="tel" placeholder="请输入手机号"/>
				</view>
				<view class="li">
					<view class="lable">密码</view>
					<input type="password" v-model="password" placeholder="请输入密码"/>
				</view>
				<view class="li">
					<view class="lable">请确认密码</view>
					<input type="password" v-model="password_1" placeholder="请确认密码"/>
				</view>
				<view class="li">
					<view class="lable">验证码</view>
					<input type="number" v-model="code" placeholder="请输入验证码" />
					<view class="btn-phone" v-if="showButton" @click="sendCode">获取验证码</view>
					<view class="btn-phone" style="color: #999;" v-if="!showButton">{{countTime}}S后重新获取</view>
				</view>
			</view>
			<view class="xieyi">
			  <checkbox class="check" :checked="checked" @change="onCheckAllChange" label=""></checkbox>
			  点击阅读并同意<span>《服务开展协议》</span>和<span>《隐私协议》</span>
			</view>
			<button class="btn login" @click="startRegist">注册</button>
		<!-- 	<button class="btn register">注册</button> -->
		</view>
	</view>
</template>

<script>
	import { sendmes,register,dropdownxuanxiang } from "@/utils/api.js";
	export default {
		data() {
			return {
				// 地区
				diqu:'',
				// 姓名
				xingming:'',
				// 公司名
				gongsiming:'',
				// 身份
				shenfen:'',
				// 验证码
				code:'',
				// 手机号
				tel:'',
				// 密码
				password:'',
				password_1:'',
				value: 0,
				showButton: true,
				countTime: 60,
				timer: null,
				checked:true,
				diquList:[],
				shenfenList:[],
				index:-1,
				diquValue:'',
				shenfenValue:''
			}
		},
		onLoad() {
           // 获取地区
		   this.getdiqu()
		   // 获取身份
		   this.getshenfen()
		},
		methods: {
			
			// 获取地区
			async getdiqu(){
				let that = this
				let data={
					dropdownxuanxiang:1
				}
				let res = await dropdownxuanxiang(data);
						console.log('获取地区',res);
						that.diquList = res.results
			},
			// 获取身份
			async getshenfen(){
				let that = this
				let data={
					dropdownxuanxiang:2
				}
				let res = await dropdownxuanxiang(data);
						that.shenfenList = res.results
						console.log('获取身份',that.shenfenList );
			},
			
			// 开始注册
			async startRegist(){
				let that = this
				if(!that.diqu){
					uni.showToast({
						title:'请选择地区',
						duration: 2000,
						icon:'none'
					})
					return
				}
				if(!that.xingming){
					uni.showToast({
						title:'请输入姓名',
						duration: 2000,
						icon:'none'
					})
					return
				}
				if(!that.gongsiming){
					uni.showToast({
						title:'请输入公司名',
						duration: 2000,
						icon:'none'
					})
					return
				}
				if(!that.tel){
					uni.showToast({
						title:'请输入手机号',
						duration: 2000,
						icon:'none'
					})
					return
				}
				if(!that.code){
					uni.showToast({
						title:'请输入验证码',
						duration: 2000,
						icon:'none'
					})
					return
				}
				
				if(that.password == ''){
					uni.showToast({
						title:'请输入密码',
						duration: 2000,
						icon:'none'
					})
					return
				}
				if(that.password_1 == ''){
					uni.showToast({
						title:'请确认密码',
						duration: 2000,
						icon:'none'
					})
					return
				}
				if(that.password != that.password_1){
					uni.showToast({
						title:'两次密码不一致！',
						duration: 2000,
						icon:'none'
					})
					return
				}
				
				let data={
					// 地区
					diqu: that.diqu,
					// 姓名
					xingming:that.xingming,
					// 公司名
					gongsiming:that.gongsiming,
					// 身份
					shenfen:that.shenfen,
					// 验证码
					code:that.code,
					// 手机号
					tel:that.tel,
					// 密码
					password:that.password
				}
				let res = await register(data);
					
						console.log('注册状态',data);
						uni.showToast({
							title:res.msg,
							duration: 2000,
						})
						uni.reLaunch({
							url:'/pages/login/index'
						})
			},
			
			goback(){
				uni.navigateBack()
			},
			
			// 地区选择
			diquPickerChange(e){
				console.log('地区选择',e)
				this.diquValue = this.diquList[e.detail.value]
				this.diqu = this.diquList[e.detail.value].mingcheng
				
			},
			// 身份选择
			shenfenPickerChange(e){
				console.log('身份选择',e)
				this.shenfenValue = this.shenfenList[e.detail.value]
				this.shenfen = this.shenfenList[e.detail.value].mingcheng
			},
			
			// 协议选择事件
			onCheckAllChange(e){
				console.log(e)
			},
			clearIcon: function() {
				this.inputClearValue = '';
				this.showClearIcon = false;
			},
			async sendCode() {
				let that = this
				let data={
					tel: that.tel,
					ctypes:1
				}
				let res = await sendmes(data);
	
						if (res.code == 0) {
						  that.countDown()
						  uni.showToast({
							title: '发送成功',
							icon: 'none'
						  })
						} else {
						  uni.showToast({
							title: res.msg,
							icon: 'none'
						  })
						}
				
				      that.countDown()
			},

			countDown() {
				let that = this
				clearInterval(that.timer)
				that.timer = null
				that.timer = setInterval(() => {
					let time = that.countTime
					time = time - 1
					that.countTime = time
					if (time == 0) {
						that.showButton = true
						that.countTime = 60
						clearInterval(that.timer)
						that.timer = null
					} else {
						that.showButton = false

					}
				}, 1000)

			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.back{
		display: flex;
		align-items: center;
		position: absolute;
		left: 40rpx;
		top: 80rpx;
		font-size: 33rpx;
	}
	.back image{
		width: 18rpx;
		height: 36rpx;
	}
	.back view{
		margin-left:16rpx;
	}
	/*#ifdef MP-WEIXIN*/
	  .back{
	  display: flex;
	  align-items: center;
	  position: absolute;
	  left: 40rpx;
	  font-size: 33rpx;
	  top: 120rpx;
	  }
	/*#endif*/
    
	.content {
		padding-bottom: 100rpx;

	}

	.topCon {
/* 		height: 800rpx; */
		background-image: linear-gradient(to bottom, #267DAC, #C8EAFD, #fff);
	}

	.topCon .title {
		width: 80%;
		margin: auto;
		font-size: 26px;
		font-weight: bold;
		padding-top: 200rpx;
	}

	.topCon .con {
		width: 88%;
		margin: auto;
		margin-top: 100rpx;
		font-size: 13px;
	}

	.topCon .con .li {
		width: 100%;
		height: 140rpx;
		position: relative;
		background: url('../../static/1.png');
		background-size: 100% 100%;
		margin-top: 20rpx;
		/* background-color: white; */
	}
	.topCon .con .li .lable{
		position: absolute;
		top: -30rpx;
		left: 30rpx;
	}
	.topCon .con .li input {
		width: 70%;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 23rpx;
		font-size: 13px;
		float: left;
		margin-left: 40rpx;
	}
	.topCon .con .li .btn-phone{
		position: absolute;
		right: 60rpx;
		bottom: 60rpx;
		color: #008BDE;
		
	}
	.picker-box{
		width: 86%;
		height: 80rpx;
		margin: auto;
		margin-top: 26rpx;
		float: left;
		margin-left: 40rpx;
	}
	.picker-box .picker{
		height: 100%;
	}
	.picker-box view{
		height: 80rpx;
		line-height: 80rpx;
	}
	.picker-box .value1{
		color: #999;
	}
	.picker-box .icon{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 0rpx;
		top: 20rpx;
	}
	
	.xieyi{
		width: 80%;
		margin: auto;
		font-size: 24rpx;
		margin-top: 20rpx;
	
	}
	.xieyi checkbox{
		transform:scale(0.7)
	}
	.xieyi span{
		color: #008BDE;
	}
	.btn{
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		color: white;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
	}
	.login{
		margin-top: 100rpx;
	}
	.register{
		background-color: #fff;
		color: #008BDE;
		border: 1rpx solid #008BDE;
	}
</style>